<template>
  <div class="flex flex-col gap-4">
    <template v-if="type == '1'">
      <h2 class="font-medium text-[1.25rem] text-[#121212] capitalize">
        {{ $t('pages.share') }}
      </h2>
      <div class="flex gap-4 items-center">
        <div
          class="size-[2rem] rounded-md group duration-300 cursor-pointer"
          v-for="(i, k) in list11"
          :key="k"
          :alt="i.alt"
          @click="openExternalConnection(k)"
        >
          <img :src="i.image" :alt="i.alt" class="size-full group-hover:scale-110 object-cover transition-all" />
        </div>
      </div>
    </template>
    <template v-if="type == '2'">
      <div class="flex gap-4 items-center">
        <a
          class="size-[2rem] rounded-md group cursor-pointer *:size-full *:object-cover relative"
          v-for="(i, k) in list22"
          :key="k"
          :alt="i.alt"
          :href="i.url"
          target="_blank"
        >
          <!-- 默认图片 -->
          <img
            :src="i.image"
            :alt="i.alt"
            :title="i.alt"
            loading="lazy"
            class="group-hover:opacity-0 absolute opacity-100 transition-all duration-300"
          />
          <!-- 悬停图片 -->
          <img
            :src="i.hoverImage"
            :alt="i.alt"
            :title="i.alt"
            loading="lazy"
            class="group-hover:opacity-100 group-hover:scale-100 absolute opacity-0 transition-all duration-300 scale-75"
          />
        </a>
      </div>
    </template>
    <template v-if="type == '3'">
      <div class="flex gap-4 items-center">
        <a
          class="lg:size-[5rem] size-[4rem] rounded-md group relative cursor-pointer *:size-full *:object-cover transition-all duration-300"
          v-for="(i, k) in list33"
          :key="k"
          :alt="i.alt"
          :href="i.url"
          target="_blank"
        >
          <!-- 默认图片 -->
          <img
            :src="i.hoverImage"
            :alt="i.alt"
            :title="i.alt"
            loading="lazy"
            class="group-hover:opacity-0 absolute opacity-100 transition-all duration-300"
          />
          <!-- 悬停图片 -->
          <img
            :src="i.image"
            :alt="i.alt"
            :title="i.alt"
            loading="lazy"
            class="group-hover:opacity-100 group-hover:scale-100 absolute opacity-0 transition-all duration-300 scale-75"
          />
        </a>
      </div>
    </template>
    <template v-if="type == '4'">
      <div class="flex justify-around items-center">
        <a
          class="size-[2rem] rounded-md cursor-pointer *:size-full *:object-cover relative"
          v-for="(i, k) in list44"
          :key="k"
          :alt="i.alt"
          :href="i.url"
          target="_blank"
        >
          <!-- 默认图片 -->
          <img :src="i.hoverImage" :alt="i.alt" :title="i.alt" loading="lazy" class="size-full object-cover" />
        </a>
      </div>
    </template>
    <!-- <share :config="config"></share> -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // YouTube: https://www.youtube.com/@SEALMGofficial
        // TikTok: https://www.tiktok.com/@sealmgofficial
        // Instagram: https://www.instagram.com/sealmgofficial/
        // X: https://x.com/SEALMGofficial
        list22: [
          {
            image: 'https://cd.sealmg.com/assets/img/follow4.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/follow44.png',
            url: 'https://www.youtube.com/@SEALMGofficial',
            alt: 'YouTube'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/follow2.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/follow22.png',
            url: 'https://www.tiktok.com/@sealmgofficial',
            alt: 'TikTok'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/follow1.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/follow11.png',
            url: 'https://www.instagram.com/sealmgofficial/',
            alt: 'Instagram'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/follow3.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/follow33.png',
            url: 'https://x.com/SEALMGofficial',
            alt: 'x'
          }
        ],
        list44: [
          {
            hoverImage: 'https://cd.sealmg.com/assets/img/follow44.png',
            url: 'https://www.youtube.com/@SEALMGofficial',
            alt: 'YouTube'
          },
          {
            hoverImage: 'https://cd.sealmg.com/assets/img/follow22.png',
            url: 'https://www.tiktok.com/@sealmgofficial',
            alt: 'TikTok'
          },
          {
            hoverImage: 'https://cd.sealmg.com/assets/img/follow11.png',
            url: 'https://www.instagram.com/sealmgofficial/',
            alt: 'Instagram'
          },
          {
            hoverImage: 'https://cd.sealmg.com/assets/img/follow33.png',
            url: 'https://x.com/SEALMGofficial',
            alt: 'x'
          }
        ],
        list11: [
          {
            image: 'https://cd.sealmg.com/assets/img/share2.png',
            alt: 'facebook'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/share3.png',
            alt: 'wathsapp'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/share1.png',
            alt: 'x'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/share4.png',
            alt: 'linkedin'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/share5.png',
            alt: 'copyLink'
          }
        ],
        list33: [
          {
            image: 'https://cd.sealmg.com/assets/img/fenx4.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/fenx44.png',
            url: 'https://www.youtube.com/@SEALMGofficial',
            alt: 'YouTube'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/fenx2.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/fenx22.png',
            url: 'https://www.tiktok.com/@sealmgofficial',
            alt: 'TikTok'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/fenx1.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/fenx11.png',
            url: 'https://www.instagram.com/sealmgofficial/',
            alt: 'Instagram'
          },
          {
            image: 'https://cd.sealmg.com/assets/img/fenx3.png',
            hoverImage: 'https://cd.sealmg.com/assets/img/fenx33.png',
            url: 'https://x.com/SEALMGofficial',
            alt: 'x'
          }
        ]
      }
    },
    props: {
      text: {
        type: Boolean,
        default: false
      },
      grayscale: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: ''
      }
    },
    methods: {
      copyHandle() {
        let currentUrl = window.location.href
        this.$copyText(currentUrl)
        let txt = this.$t('pages.copySuccess')
        this.$message.success(txt)
      },
      openExternalConnection(k) {
        if (k == 4) {
          this.copyHandle()
          return
        }
        let currentUrl = window.location.href
        let urlMap = {
          0: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`,
          1: `https://api.whatsapp.com/send?text=${encodeURIComponent(currentUrl)}`,
          2: `https://x.com/intent/post?via=SEALMG&text=${encodeURIComponent(currentUrl)}`,
          3: `https://www.linkedin.com/uas/login?session_redirect=https://www.linkedin.com/shareArticle?token&isFramed=false&url=${encodeURIComponent(
            currentUrl
          )}`
        }
        window.open(urlMap[k], 'newwindow', 'height=600, width=700, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
      }
    }
  }
</script>
<style lang="less" scoped></style>
